var map = new AMap.Map("mapcontainer", {
    resizeEnable: true,
    zoom: 14
});
var main=new Vue({
    el:"#navigation",
    data:{
        carList:[],
        usersList:[],
        projectList:[]
    },
    methods:{
        getCarList(data){
            $.ajax({
                type: "GET",
                url:  baseURL + 'xinpai/car/select',
                contentType: "application/json",
                data: data,
                success: function(r){
                    if(r.code === 0){
                        main.carList=r.list;
                        r.list.forEach(function (obj) {
                            let extData={imei:obj.imei,type:0}
                            let lng=obj.location.split(",");
                            let lngLat=new AMap.LngLat(lng[0],lng[1]);
                            let marker = new AMap.Marker({
                                icon: "../statics/img/carRed.png",
                                position: lngLat,
                                visible:obj.state==0?false:true,
                                extData:extData,
                                label:{
                                    offset: new AMap.Pixel(-20,-30),
                                    content: obj.plateNum
                                }
                            });
                            map.add(marker);
                        })
                        map.setFitView();
                    }else{
                        alert(r.msg);
                    }
                }
            });
        },
        getUsersList(data){
            $.ajax({
                type: "GET",
                url:  baseURL + 'xinpai/users/select',
                contentType: "application/json",
                data: data,
                success: function(r){
                    if(r.code === 0){
                        main.usersList=r.list;
                        r.list.forEach(function (obj) {
                            let extData={imei:obj.imei,type:1}
                            let lng=obj.location.split(",");
                            let lngLat=new AMap.LngLat(lng[0],lng[1]);
                            let marker = new AMap.Marker({
                                icon: "../statics/img/cleaner.png",
                                position: lngLat,
                                extData:extData,
                                visible:obj.state==0?false:true,
                                label:{
                                    offset: new AMap.Pixel(-20,-30),
                                    content: obj.name
                                }
                            });
                            map.add(marker);
                        })
                        map.setFitView();
                    }else{
                        alert(r.msg);
                    }
                }
            });
        },
        selectProjectList:function (data={parentId:0,type:0}) {
            $.ajax({
                type: "GET",
                url:  baseURL + 'xinpai/project/list',
                contentType: "application/json",
                data: data,
                success: function(r){
                    if(r.code === 0){
                        main.projectList=r.list;
                        if(r.list.length>0){
                            main.getCarList(data={projectId:r.list[0].pid});
                            main.getUsersList(data={projectId:r.list[0].pid});
                        }
                        main.$nextTick(function () {
                            $('.collapse').collapse('hide');
                            $("#set"+r.list[0].pid).collapse("show");
                            if(stompClient==null){
                                connect(r.list[0].firmId)
                            }
                        })
                    }else{
                        alert(r.msg);
                    }
                }
            });
        },
        action:function (id) {
            main.getCarList({projectId:id});
            main.getUsersList({projectId:id});
        }
    },
    created(){
        this.selectProjectList();
    }
})
var p=[];
//连接服务器
var stompClient=null;
function connect(firmId) {
    const socket = new SockJS('/endpointSang');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        stompClient.subscribe(`/user/${firmId}/gps`, function (response) {
            let dev=JSON.parse(response.body).car;
            let data=JSON.parse(JSON.parse(response.body).data.dataContent);
            let list=map.getAllOverlays('marker');
            console.log('进来了',dev);
            list.forEach(function (obj) {
                console.log(obj.getExtData().imei);
                if(obj.getExtData().imei==dev.imei&&dev.state==1){
                    console.log('进来了',dev.state);
                    if(dev.location!=null&&$.inArray(dev.imei,p)!=-1){
                        var position=dev.location.split(",");
                        if(parseInt(data.sp)>1) {//速度大于0 表示已经移动
                            obj.setAngle(parseFloat(data.ag));
                            obj.moveTo(new AMap.LngLat(position[0], position[1]), parseInt(data.sp) * 1.852);
                        }else {
                            obj.setPosition(new AMap.LngLat(position[0], position[1]));
                        }
                        obj.show();
                    }else if(dev.location!=null&&$.inArray(dev.imei,p)==-1){
                        p.push(dev.imei)
                        var position=dev.location.split(",");
                        obj.setAngle(parseFloat(data.ag));
                        obj.setPosition(new AMap.LngLat(position[0], position[1]));
                        obj.show();
                        console.log('进来了',dev.state);
                    }
                }else if(dev.state==0){
                    obj.hide();
                }
            })
        });
        stompClient.subscribe(`/user/${firmId}/shouhuan`, function (response) {
            console.log(response);
            let devic =JSON.parse(response.body).user;
            let list=map.getAllOverlays('marker');
            list.forEach(function (obj) {
                if(obj.getExtData().imei==devic.imei&&devic.state==1){
                    if(devic.location!=null){
                        var position=devic.location.split(",");
                        obj.moveTo(new AMap.LngLat(position[0], position[1]),4);
                        obj.show();
                    }
                }else if(devic.state==0){
                    obj.hide();
                }
            })

        });
    });
}